<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://www.zkingsoft.com" prefix="matrix"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<LINK rel="Bookmark" href="../images/favicon.ico">
<!-- 本框架基本脚本和样式 -->
<script type="text/javascript"
	src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/MBase.js"></script>
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content  " id="app">
		<div class="row">
			<!-- 搜索框部分en -->
			<table class="table table-bordered ">
				<thead>
					<tr>
						<th >餐·点</th>
						<th colspan="2" >星期一</th>
						<th colspan="2" >星期二</th>
						<th colspan="2" >星期三</th>
						<th colspan="2" >星期四</th>
						<th colspan="2" >星期五</th>
					</tr>
				</thead>
				<tbody>
						<tr v-for="(item,rowsIndex) in rows">
							<td  >{{item.meal}}</td>
							<template v-for="(inner, foodsIndex) in item.foods" >
								<td @click="update(rowsIndex,foodsIndex,'food')" >
									<template v-for="food in inner.food" >
										<b>{{food.name}}</b><br>
									</template>
								</td>
								<td @click="update(rowsIndex,foodsIndex,'material')">
									<template v-for="material in inner.material" >
										{{material.name}} &nbsp;{{material.weight}} <br>
									</template>
								</td>
							</template>
						</tr>
				</tbody>
			</table>
		</div>
	</div>
	<script type="text/javascript"
		src="${path }/resource/js/systools/MJsBase.js"></script>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el : '#app',
			methods:{
				update:function(rowsIndex,foodsIndex,type){
					if(type=='food'){
						console.log(app.rows[rowsIndex].foods[foodsIndex].food);
					}
					if(type=='material'){
						console.log(app.rows[rowsIndex].foods[foodsIndex].material);
					}
				}
		
			},
			data : {
				rows :[
						{
							meal:'早餐',
							foods:[
									{
										food:[{id:1,name:'三鲜混沌1'},{id:1,name:'面包片1'}], 
										material:[{id:1,name:'馄饨',weight:'5'},{id:1,name:'面包',weight:'5'}] 
									},
									{
										food:[{id:1,name:'三鲜混沌'},{id:1,name:'面包片'}], 
										material:[{id:1,name:'馄饨',weight:'5'},{id:1,name:'面包',weight:'5'}] 
									},
									{
										food:[{id:1,name:'三鲜混沌'},{id:1,name:'面包片'}], 
										material:[{id:1,name:'馄饨',weight:'5'},{id:1,name:'面包',weight:'5'}] 
									},
									{
										food:[{id:1,name:'三鲜混沌'},{id:1,name:'面包片'}], 
										material:[{id:1,name:'馄饨',weight:'5'},{id:1,name:'面包',weight:'5'}] 
									},
									{
										food:[{id:1,name:'三鲜混沌'},{id:1,name:'面包片'}], 
										material:[{id:1,name:'馄饨',weight:'5'},{id:1,name:'面包',weight:'5'}] 
									},
								]
						},
						{
							meal:'中餐',
							foods:[
									{
										food:[{id:1,name:'三鲜混沌'},{id:1,name:'面包片'}], 
										material:[{id:1,name:'馄饨',weight:'5'},{id:1,name:'面包',weight:'5'}] 
									},
									{
										food:[{id:1,name:'三鲜混沌'},{id:1,name:'面包片'}], 
										material:[{id:1,name:'馄饨',weight:'5'},{id:1,name:'面包',weight:'5'}] 
									},
									{
										food:[{id:1,name:'三鲜混沌'},{id:1,name:'面包片'}], 
										material:[{id:1,name:'馄饨',weight:'5'},{id:1,name:'面包',weight:'5'}] 
									},
									{
										food:[{id:1,name:'三鲜混沌'},{id:1,name:'面包片'}], 
										material:[{id:1,name:'馄饨',weight:'5'},{id:1,name:'面包',weight:'5'}] 
									},
									{
										food:[{id:1,name:'三鲜混沌'},{id:1,name:'面包片'}], 
										material:[{id:1,name:'馄饨',weight:'5'},{id:1,name:'面包',weight:'5'}] 
									},
								]
						},
						{
							meal:'晚餐',
							foods:[
									{
										food:[{id:1,name:'三鲜混沌'},{id:1,name:'面包片'}], 
										material:[{id:1,name:'馄饨',weight:'5'},{id:1,name:'面包',weight:'5'}] 
									},
									{
										food:[{id:1,name:'三鲜混沌'},{id:1,name:'面包片'}], 
										material:[{id:1,name:'馄饨',weight:'5'},{id:1,name:'面包',weight:'5'}] 
									},
									{
										food:[{id:1,name:'三鲜混沌'},{id:1,name:'面包片'}], 
										material:[{id:1,name:'馄饨',weight:'5'},{id:1,name:'面包',weight:'5'}] 
									},
									{
										food:[{id:1,name:'三鲜混沌'},{id:1,name:'面包片'}], 
										material:[{id:1,name:'馄饨',weight:'5'},{id:1,name:'面包',weight:'5'}] 
									},
									{
										food:[{id:1,name:'三鲜混沌'},{id:1,name:'面包片'}], 
										material:[{id:1,name:'馄饨',weight:'5'},{id:1,name:'面包',weight:'5'}] 
									},
								]
						}
					
					]
			}
		})
	</script>
</body>
</html>
